<template>
  <div class="BMIStatus">
    <h3>BMI 中国标准</h3>
    <table>
      <tr
        v-for="(item, index) of resultList"
        :key="item.text"
        :style="{ backgroundColor: item.bg }"
      >
        <template v-if="index === 0">
          <th style="background-color: #fff"></th>
          <th>{{ item.text }}</th>
          <th>{{ item.val }}</th>
        </template>
        <template v-else>
          <td style="background-color: #fff">
            <span :style="{ opacity: status === item.text ? 1 : 0 }"> > </span>
          </td>
          <td>{{ item.text }}</td>
          <td>{{ item.val }}</td>
        </template>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "BMIStatus",
  // props: []
  props: {
    status: String
  },
  data: () => ({
    resultList: [
      { text: "分类", val: "BMI 范围", bg: "lightskyblue" },
      { text: "偏瘦", val: "<= 18.4", bg: "gray" },
      { text: "正常", val: "18.5 ~ 23.9", bg: "green" },
      { text: "过重", val: "24.0 ~ 27.9", bg: "yellow" },
      { text: "肥胖", val: ">= 28.0", bg: "orange" },
    ]
  })
}
</script>
<style>
body {
  /*color: lightskyblue;*/
}
</style>
